<template>
<h2 style="text-align: center;">用户登录</h2>
<table class="table" style="width: 500px;margin: 10px auto;">
    <tbody>
        <tr>
            <td>用户名</td>
            <td>
                <input type="text" v-model="from.loginname" class="form-control">
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password" v-model="from.password" class="form-control">
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <button class="btn btn-primary" v-on:click="login">登录</button>
            </td>
        </tr>
    </tbody>
</table>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
// bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"

// 登录信息
const from = reactive({
    loginname: "",
    password:""
})
// 方法
// 登录
const login = () => {
    // 非空判定
    if (!from.loginname) {
        alert("用户名不能为空！");
        return;
    }
    if (!from.password) {
        alert("密码不能为空！");
        return;
    }
    // 访问后端WebApi
    axios.get("http://localhost:5123/api/UserInfo?LoginName="+from.loginname+"&Password="+from.password).then(res => {
        if (res.data == 1) {
            alert("登录成功！")
            location.href = "userList";
        }
        if (res.data == -1) {
            alert("用户名错误")
        }
        if (res.data == -2) {
            alert("用户密码错误")
        }
    }).catch(err => {
        console.log(err);
    })
}
</script>